<template>
  <div>
    <h1>解约协议录入</h1>
    <el-button @click="surrender">退租物业交割单</el-button>
    <el-button @click="contract" disabled>解约协议</el-button>
    <!-- //////////////////////////退租物业交割单//////////////////////////   -->
    <div v-if="surrenders">
      <!-- //////////收房合同查询对话框/////////////////     -->
      <el-dialog
        title=""
        :visible.sync="terminformdialog"
        width="50%"
        :before-close="handleClose"
      >

        <!--/////////////////////收房合同查询//////////////////      -->
        <el-form :inline="true" :model="pageInfo" class="demo-form-inline">
          <el-form-item label="小区名称">
            <el-input v-model="pageInfo.premiseName" placeholder="小区名称" />
          </el-form-item>
          <el-form-item label="业主姓名">
            <el-input v-model="pageInfo.ownerName" placeholder="业主姓名" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="pageSubmit">查询</el-button>
          </el-form-item>
        </el-form>
        <!--/////////////////////收房合同查询//////////////////      -->

        <!--  ///////////////////收房表格///////////////////////      -->
        <el-table
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            fixed
            prop="ownerName"
            label="业主姓名"
          />
          <el-table-column
            prop="houseName"
            label="房产信息"
          >
            <template v-slot="scope">
              {{ scope.row.premiseName }}{{ scope.row.houseName }}
            </template>
          </el-table-column>

          <el-table-column
            prop="createTime"
            label="签约时间"
          />
          <el-table-column
            fixed="right"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button type="warning" size="small" @click="handleClick(scope.row)">选中</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="pageInfo.pageNum"
          :page-sizes="[3, 6, 9]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <!--/////////////////////收房表格//////////////////      -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="terminformdialog = false">取 消</el-button>
          <el-button type="primary" @click="terminformdialog = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- //////////表单/////////////////     -->
      <el-form ref="formName" :model="terminform" label-width="100px" :inline="true" >
        <el-form-item label="收房合同号" prop="sfContractId">
          <el-input v-model="terminform.sfContractId" style="width: 200px"  />
          <el-button type="primary" @click="getcfContract()">收房合同查询</el-button>
          <el-button type="success" @click="addDomain">应退</el-button>
          <el-button type="success" @click="addDomains">应收</el-button>
        </el-form-item><br>
        <el-form-item label="收房合同编号" prop="sfContractNo">
          <el-input v-model="terminform.sfContractNo" style="width: 200px" />
        </el-form-item>
        <el-form-item label="房产信息" prop="houseName">
          <el-input v-model="terminform.houseName" style="width: 200px" />
        </el-form-item><br>
        <el-form-item label="产权地址" prop="cqAddress">
          <el-input v-model="terminform.cqAddress" style="width: 200px" />
        </el-form-item>
        <el-form-item label="房产证书编号" prop="houseZsNo">
          <el-input v-model="terminform.houseZsNo" style="width: 200px" />
        </el-form-item><br>
        <el-form-item label="业主姓名" prop="ownerName">
          <el-input v-model="terminform.ownerName" style="width: 200px" />
        </el-form-item>
        <el-form-item label="业主联系方式" prop="ownerMobile">
          <el-input v-model="terminform.ownerMobile" style="width: 200px" />
        </el-form-item><br>
        <el-form-item label="签约人姓名" prop="signUserName">
          <el-input v-model="terminform.signUserName" style="width: 200px" />
        </el-form-item>
        <el-form-item label="签约人电话" prop="signUserMobile">
          <el-input v-model="terminform.signUserMobile" style="width: 200px" />
        </el-form-item><br>
        <el-form-item label="物业交割日期" prop="wyjgDate">
          <el-date-picker
            v-model="terminform.wyjgDate"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="签约类型" prop="terminationType">
          <el-select v-model="terminform.terminationType" placeholder="---请选择---">
            <el-option
              label="合同到期"
              value="1"
            />
            <el-option
              label="业主提前解约"
              value="2"
            />
            <el-option
              label="我方退租解约"
              value="3"
            />
            <el-option
              label="其他"
              value="4"
            />
          </el-select>
        </el-form-item><br>

        <!--  ////////////////////////////动态应退////////////////////////      -->
        <el-form-item
          v-for="(domain, index) in terminform.sfFinalStatementDetailList"
          :key="domain.key"
          :label="'应退'"
          :prop="'sfFinalStatementDetailList.' + index + '.value'"
        >
          类型<el-select v-model="domain.itemType" placeholder="请选择">
          <el-option
            label="押金"
            value="1">
          </el-option>
          <el-option
            label="房租"
            value="2">
          </el-option>
          <el-option
            label="水费"
            value="3">
          </el-option>
          <el-option
            label="电费"
            value="4">
          </el-option>
          <el-option
            label="煤/燃气费"
            value="5">
          </el-option>
          <el-option
            label="其它"
            value="6">
          </el-option>
        </el-select>
          金额(元)<el-input v-model="domain.amount" style="width: 200px" />
          备注<el-input v-model="domain.remark" style="width: 200px" />
          操作<el-button @click.prevent="removeDomain(domain)">删除</el-button>
        </el-form-item><br>
        <br>
        <!--  ////////////////////////////动态应退////////////////////////      -->

        <!--  ////////////////////////////动态应收////////////////////////      -->
        <el-form-item
          v-for="(domain, index) in terminform.sfFinalStatementDetailLists"
          :key="domain.key"
          :label="'应收'"
          :prop="'sfFinalStatementDetailLists.' + index + '.value'"
        >
          类型<el-select v-model="domain.itemType" placeholder="请选择">
          <el-option
            label="押金"
            value="1">
          </el-option>
          <el-option
            label="房租"
            value="2">
          </el-option>
          <el-option
            label="水费"
            value="3">
          </el-option>
          <el-option
            label="电费"
            value="4">
          </el-option>
          <el-option
            label="煤/燃气费"
            value="5">
          </el-option>
          <el-option
            label="其它"
            value="6">
          </el-option>
        </el-select>
          金额(元)<el-input v-model="domain.amount" style="width: 200px" />
          备注<el-input v-model="domain.remark" style="width: 200px" />
          操作<el-button @click.prevent="removeDomains(domain)">删除</el-button>
        </el-form-item><br>
        <!--  ////////////////////////////动态应收////////////////////////      -->

        <el-form-item label="备注" prop="remark">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="terminform.remark">
          </el-input>
        </el-form-item><br>

        <el-form-item>
          <el-button type="primary" @click="handleterminformSubmit">立即创建</el-button>
          <el-button @click="cancel()">取消</el-button>
        </el-form-item>
      </el-form>
      <!-- //////////表单/////////////////     -->
    </div>
    <!-- //////////////////////////退租物业交割单//////////////////////////   -->
    <!--//////////////////////////解约协议///////////////////////////    -->
    <div v-if="contracts">
      <font color="#ff8c00">▐</font>解约合同<hr>
      <br>
      <el-upload
        class="avatar-uploader"
        action="http://localhost:8200/hou/upload/pic"
        :show-file-list="false"
        :on-success="handlecancelAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="cancel_the_contract" :src="cancel_the_contract" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <br><font color="#ff8c00">▐</font>物业交割单<hr>
      <br>
      <el-upload
        class="avatar-uploader"
        action="http://localhost:8200/hou/upload/pic"
        :show-file-list="false"
        :on-success="handledeliveryAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="property_delivery_note" :src="property_delivery_note" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <br><font color="#ff8c00">▐</font>其他<hr>
      <el-upload
        class="avatar-uploader"
        action="http://localhost:8200/hou/upload/pic"
        :show-file-list="false"
        :on-success="handleothersAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="others" :src="others" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <hr>
      <div align="center">
        <el-button type="warning" @click="surrender">上一步</el-button>
        <el-button type="success" @click="handlesubmit()">提交</el-button>
      </div>
    </div>
    <!--//////////////////////////解约协议///////////////////////////    -->
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: 'TerminationAgreementInput',
    data() {
      return {
        contracts: false,
        surrenders: true,
        terminformdialog: false,
        cancel_the_contract: '',
        property_delivery_note:'',
        others:'',
        terminform: {
          remark:[],
          sfFinalStatementDetailList: [],
          sfFinalStatementDetailLists: [],
        },
        pageInfo: {
          pageNum: 1,
          pageSize: 3,
          total: 0,
          premiseName: '',
          ownerName: ''
        },
        tableData: []
      }
    },
    created() {
      this.initData()
    },
    methods: {
      cancel(formName){
        this.$refs['formName'].resetFields();
        this.terminform.sfFinalStatementDetailLists=[]
      },
      handleSizeChange(val) {
        this.pageInfo.pageSize = val
        this.initData()
      },
      handleCurrentChange(val) {
        this.pageInfo.pageNum = val
        this.initData()
      },
      pageSubmit() {
        this.initData()
      },
      initData() {
        axios.post('http://localhost:8200/hou/TSfContractController/selectlist', this.pageInfo).then((response) => {
          console.log(response.data)
          this.tableData = response.data.obj.list
          this.pageInfo.pageNum = response.data.obj.pageNum
          this.pageInfo.pageSize = response.data.obj.pageSize
          this.pageInfo.total = response.data.obj.total
        })
      },
      handleClick(row) {
        console.log(row)
        this.terminform.sfContractId=row.id
        this.terminform.sfContractNo=row.sfContractNo
        this.terminform.cqAddress=row.cqAddress
        this.terminform.houseName=row.houseName
        this.terminform.houseZsNo=row.houseZsNo
        this.terminform.ownerName=row.ownerName
        this.terminform.ownerMobile=row.ownerMobile
        this.terminform.signUserName=row.signUserName
        this.terminform.signUserMobile=row.signUserMobile
        this.terminform.remark=row.remark
        this.terminformdialog = false
      },
      surrender() {
        this.contracts = false
        this.surrenders = true
      },
      contract() {
        this.contracts = true
        this.surrenders = false
      },
      handleterminformSubmit() {
        if (this.terminform.sfContractId!=undefined){
          this.contract()
        }else{
          alert("请输入信息")
          return;
        }
      },
      handlesubmit(){
        if (this.terminform.sfContractId!=undefined){
          axios.post('http://localhost:8200/hou/TSfTerminationController/savetermination',this.terminform).then((response) => {
            if (response.data.code == 200) {
              alert(JSON.stringify(response.data.msg))
              this.terminform.sfContractId=''
              this.terminform.sfContractNo=''
              this.terminform.cqAddress=''
              this.terminform.houseName=''
              this.terminform.houseZsNo=''
              this.terminform.ownerName=''
              this.terminform.ownerMobile=''
              this.terminform.signUserName=''
              this.terminform.signUserMobile=''
              this.terminform.remark=''
              this.terminform.wyjgDate=''
              this.terminform.terminationType=''
              this.terminform.sfFinalStatementDetailLists=[]
              this.terminform.sfFinalStatementDetailList=[]
              this.initData()
              this.surrender()
            }
          })
        }else {
          alert("请输入信息")
          return;
        }
      },
      getcfContract() {
        this.terminformdialog = true
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => {})
      },
      removeDomain(item) {
        var index = this.terminform.sfFinalStatementDetailList.indexOf(item)
        if (index !== -1) {
          this.terminform.sfFinalStatementDetailList.splice(index, 1)
        }
      },
      removeDomains(item) {
        var index = this.terminform.sfFinalStatementDetailLists.indexOf(item)
        if (index !== -1) {
          this.terminform.sfFinalStatementDetailLists.splice(index, 1)
        }
      },
      addDomain() {
        this.terminform.sfFinalStatementDetailList.push({

          key: Date.now()
        })
      },
      addDomains() {
        this.terminform.sfFinalStatementDetailLists.push({

          key: Date.now()
        })
      },
      handlecancelAvatarSuccess(res, file) {
        this.cancel_the_contract = URL.createObjectURL(file.raw);
      },
      handledeliveryAvatarSuccess(res, file) {
        this.property_delivery_note = URL.createObjectURL(file.raw);
      },
      handleothersAvatarSuccess(res, file) {
        this.others = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return true;
      },
    }
  }
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
